<template>
  <div class="mian">
    <div class="login">
      <h3>liz Front and rear end separation items</h3>
      <Form
        ref="formInline"
        :model="formInline"
        class="login_box"
        v-show="logins"
      >
      <h3>login</h3>
        <FormItem prop="user">
          <Input
            type="text"
            v-model="formInline.username"
            placeholder="Username"
            clearable
          >
            <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="password">
          <Input
            type="password"
            v-model="formInline.password"
            placeholder="Password"
            clearable
          >
            <Icon type="ios-lock-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem class="btns">
          <Button type="info" @click="reguser">注册</Button>
          <Button type="success" @click="login">登录</Button>
        </FormItem>
      </Form>
      <Form
        ref="formInline"
        :model="formInline"
        class="login_box"
        v-show="regusers"
      >
       <h3>register</h3>
        <FormItem prop="user">
          <Input
            type="text"
            v-model="formInline.username"
            placeholder="Username"
            clearable
          >
            <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="password">
          <Input
            type="password"
            v-model="formInline.password"
            placeholder="Password"
            clearable
          >
            <Icon type="ios-lock-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem class="btns">
          <Button type="info" @click="back">返回</Button>
          <Button type="success" @click="oks">确定</Button>
        </FormItem>
      </Form>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import axios from 'axios'
export default {
  name: 'Login',
  data() {
    return {
      logins: true,
      regusers: false,
      formInline: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    login() {
      const params = new URLSearchParams()
      params.append('username', this.formInline.username)
      params.append('password', this.formInline.password)

      axios
        .post('/api/login', params)
        .then((res) => {
          if (res.data.status === 200) {
            console.log(res)
            this.$Message.success('登录成功')
            window.sessionStorage.setItem('token', res.data.token)
            this.$router.push('/home')
          } else {
            this.$Message.error(res.data.message)
          }
        })
        .catch((err) => {
          console.error(err)
        })
    },
    reguser() {
      this.logins = false
      this.regusers = true
    },
    back() {
      this.regusers = false
      this.logins = true
    },
    oks() {
      const params = new URLSearchParams()
      params.append('username', this.formInline.username)
      params.append('password', this.formInline.password)

      axios.post('/api/reguser', params).then((res) => {
        if (res.data.status !== 200) {
          this.$Message.error(res.data.message)
          console.log(res.data.message)
        } else {
          this.$Message.success('注册成功 请登录')
          this.regusers = false
          this.logins = true
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.mian {
  height: 100vh;
  width: 100%;
  background-size: 100% 100%;
  // background: linear-gradient(200deg,#72afd3,#96fbc4);
  background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
  // background-image: url('../assets/f.png');
}

.login {
  width: 450px;
  height: 300px;
  border: 1px solid aqua;
  position: absolute;
  left: 35%;
  top: 30%;
  border-radius: 15px;
}
.login_box {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
.btns {
  display: flex;
  justify-content: center;
  button {
    margin: 5px;
  }
}
h3 {
  color: aqua;
  text-align: center;
  margin: 0 auto;
  margin-top: 40px;
}
</style>
